<template>
  <!-- 分类内容列表 -->
  <div class="content-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <router-link
        tag="div"
        :to="'/noveldetail?id=' + item.id"
        v-for="item in fiction"
        :key="item.id"
      >
        <div class="book-list">
          <div class="imgs">
            <img :src="item.fictionImg" alt="" />
          </div>
          <div class="conter">
            <div class="name">{{ item.titleName }}</div>
            <div class="username">{{ item.Author }}</div>
            <div class="infor-name">
              {{ item.introduce }}
            </div>
          </div>
          <div class="number_du">{{item.Number}}</div>
        </div>
        <div class="line">
          <hr size="1" color="#efefef" />
        </div>
      </router-link>
    </van-list>
  </div>
</template>

<script>
import { getFictionApi } from "../../api/novelmain.js";

export default {
  data() {
    return {
      fiction: [],
      // list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        getFictionApi({ id: this.$route.query.id }).then((data) => {
          // let index = data.fiction.findIndex(
          //   (item) => item.id == this.$route.query.id
          // );
          // this.fiction = data.fiction[index];
          this.fiction = data.fiction;
          for (let i = 1; i <1; i++) {
            this.fiction.push(this.fiction.length - 1);
          }
          this.loading = false;
          if (this.fiction.length >= 10) {
            this.finished = true;
          }
        });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>

.number_du {
  font-size: 12px;
  color: #999;
  position: absolute;
  right: 5%;
}
.conter .infor-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

</style>